<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <ul>
        <!-- 这个li推荐不要写在一行,我结构没弄对,出bug吓死我了 -->
        <li><i class="glyphicon glyphicon-king"></i><div><b class="glyphicon glyphicon-king"></b><div></li>
        <li><i class="glyphicon glyphicon-queen"></i><div><b class="glyphicon glyphicon-queen"></b><div></li>
        <li><i class="glyphicon glyphicon-pawn"></i><div><b class="glyphicon glyphicon-pawn"></b><div></div></li>
        <li><i class="glyphicon glyphicon-bishop"></i><div><b class="glyphicon glyphicon-bishop"></b><div></div></li>
        <li><i class="glyphicon glyphicon-knight"></i><div><b class="glyphicon glyphicon-knight"></b><div></div></li>
    </ul>
    <script>
                function getRGB(){
            var str = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`
            return str
        }
        document.querySelectorAll('li').forEach(item=>{
            item.style = "--clr:"+getRGB()
        })
    </script>
</body>

</html>